<%@ page pageEncoding="UTF-8"%>

<%@ include file="includes/include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%--<jsp:include page="includes/header.jsp">
  <jsp:param name="pageTitle" value="<fmt:message key="signup-title"/>" />
</jsp:include>--%>

<c:import url="includes/header.jsp">
  <c:param name="pageTitle">
    <fmt:message key="signup-headTitle"/>
  </c:param>
</c:import>

<style type="text/css">
  a, h2 {
    color: #0566cc;
  }
  .error {
    color: red;
    font-size: 9pt;
  }
  #gtugs-signupFormTable {
    margin: 15px 0 10px 0;
    width: 100%;
  }
  #gtugs-signupFormTable th {
    font-size: 9pt;
    font-weight: normal;
    text-align: left;
  }
  #gtugs-signupFormTable td {
    padding-right: 15px;
  }
  #gtugs-signupFormTable td input {
    width: 100%;
  }
  #gtugs-signupFormTable td select {
    width: 100%;
  }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/json2.js"></script>
<script type="text/javascript">
  var gtugs = {
    map: null,
    activeInfoWindow: null,
    GTUG_MARKER: '/static/gtugmarker.png',
    MARKER_SHADOW: '/static/markershadow.png'
  };

  gtugs.countries = [
    {
      code: 'RU',
      coordinates: {
        latlng: new google.maps.LatLng(63.52401, 109.318756),
        zoom: 3
      },
      cities: [
        'Абакан',
        'Альметьевск',
        'Ангарск',
        'Арзамас',
        'Армавир',
        'Артём',
        'Архангельск',
        'Астрахань',
        'Ачинск',
        'Балаково',
        'Балашиха',
        'Барнаул',
        'Батайск',
        'Белгород',
        'Березники',
        'Бийск',
        'Благовещенск',
        'Братск',
        'Брянск',
        'Великие Луки',
        'Великий Новгород',
        'Владивосток',
        'Владикавказ',
        'Владимир',
        'Волгоград',
        'Волгодонск',
        'Волжский',
        'Вологда',
        'Воронеж',
        'Глазов',
        'Грозный',
        'Дербент',
        'Дзержинск',
        'Димитровград',
        'Екатеринбург',
        'Елец',
        'Железнодорожный',
        'Жуковский',
        'Златоуст',
        'Иваново',
        'Ижевск',
        'Иркутск',
        'Йошкар-Ола',
        'Казань',
        'Калининград',
        'Калуга',
        'Каменск-Уральский',
        'Камышин',
        'Канск',
        'Кемерово',
        'Киров',
        'Киселёвск',
        'Кисловодск',
        'Ковров',
        'Коломна',
        'Колпино',
        'Комсомольск-на-Амуре',
        'Копейск',
        'Королёв',
        'Кострома',
        'Краснодар',
        'Красноярск',
        'Курган',
        'Курск',
        'Кызыл',
        'Ленинск-Кузнецкий',
        'Липецк',
        'Люберцы',
        'Магадан',
        'Магнитогорск',
        'Майкоп',
        'Махачкала',
        'Междуреченск',
        'Миасс',
        'Москва',
        'Мурманск',
        'Муром',
        'Мытищи',
        'Набережные Челны',
        'Назрань',
        'Нальчик',
        'Находка',
        'Невинномысск',
        'Нефтекамск',
        'Нефтеюганск',
        'Нижневартовск',
        'Нижнекамск',
        'Нижний Новгород',
        'Нижний Тагил',
        'Новокузнецк',
        'Новокуйбышевск',
        'Новомосковск',
        'Новороссийск',
        'Новосибирск',
        'Новотроицк',
        'Новочебоксарск',
        'Новочеркасск',
        'Новошахтинск',
        'Новый Уренгой',
        'Ногинск',
        'Норильск',
        'Ноябрьск',
        'Обнинск',
        'Одинцово',
        'Октябрьский',
        'Омск',
        'Орёл',
        'Оренбург',
        'Орехово-Зуево',
        'Орск',
        'Пенза',
        'Первоуральск',
        'Пермь',
        'Петрозаводск',
        'Петропавловск-Камчатский',
        'Подольск',
        'Прокопьевск',
        'Псков',
        'Пятигорск',
        'Ростов-на-Дону',
        'Рубцовск',
        'Рыбинск',
        'Рязань',
        'Салават',
        'Самара',
        'Санкт-Петербург',
        'Саранск',
        'Саратов',
        'Северодвинск',
        'Северск',
        'Сергиев Посад',
        'Серпухов',
        'Смоленск',
        'Сочи',
        'Ставрополь',
        'Старый Оскол',
        'Стерлитамак',
        'Сургут',
        'Сызрань',
        'Сыктывкар',
        'Таганрог',
        'Тамбов',
        'Тверь',
        'Тобольск',
        'Тольятти',
        'Томск',
        'Тула',
        'Тюмень',
        'Улан-Удэ',
        'Ульяновск',
        'Уссурийск',
        'Уфа',
        'Ухта',
        'Хабаровск',
        'Хасавюрт',
        'Химки',
        'Чебоксары',
        'Челябинск',
        'Череповец',
        'Черкесск',
        'Чита',
        'Шахты',
        'Щёлково',
        'Электросталь',
        'Элиста',
        'Энгельс',
        'Южно-Сахалинск',
        'Якутск',
        'Ярославль'
      ]
    },
    {
      code: 'UA',
      coordinates: {
        latlng: new google.maps.LatLng(49.379433, 31.16558),
        zoom: 6
      },
      cities: [
        'Алчевск',
        'Белая Церковь',
        'Бердянск',
        'Винница',
        'Горловка',
        'Днепродзержинск',
        'Днепропетровск',
        'Донецк',
        'Евпатория',
        'Житомир',
        'Запорожье',
        'Ивано-Франковск',
        'Керчь',
        'Киев',
        'Кировоград',
        'Краматорск',
        'Кременчуг',
        'Кривой Рог',
        'Лисичанск',
        'Луганск',
        'Луцк',
        'Львов',
        'Макеевка',
        'Мариуполь',
        'Мелитополь',
        'Николаев',
        'Никополь',
        'Одесса',
        'Павлоград',
        'Полтава',
        'Ровно',
        'Севастополь',
        'Северодонецк',
        'Симферополь',
        'Славянск',
        'Сумы',
        'Тернополь',
        'Ужгород',
        'Харьков',
        'Херсон',
        'Хмельницкий',
        'Черкассы',
        'Чернигов',
        'Черновцы'
      ]
    },
    {
      code: 'BY',
      coordinates: {
        latlng: new google.maps.LatLng(53.8, 27.949219),
        zoom: 6
      },
      cities: [
        'Барановичи',
        'Бобруйск',
        'Борисов',
        'Брест',
        'Витебск',
        'Гомель',
        'Гродно',
        'Минск',
        'Могилёв',
        'Мозырь',
        'Новополоцк',
        'Орша',
        'Пинск'
      ]
    }
    /*{
      code: 'US',
      coordinates: {
        latlng: new google.maps.LatLng(39.09024, -95.712891),
        zoom: 4
      },
      cities: [
        'Denver, CO',
        'San Francisco, CA'
      ]
    }*/
  ];

  window.onload = function() {
    gtugs.map = new google.maps.Map(document.getElementById("map"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(39.09024, -95.712891),
        zoom: 4,
        disableDefaultUI: true,
        scrollwheel: false
    });

    new core.AjaxRequest('GET', '/chapters', function(json) {
        var chapters = JSON.parse(json).chapters;
        for (var i = 0; i < chapters.length; i++) {
          var chapter = chapters[i];

          var coordinates = new google.maps.LatLng(chapter.latitude,
              chapter.longitude);
          var shadow = new google.maps.MarkerImage(gtugs.MARKER_SHADOW,
              new google.maps.Size(37, 34), new google.maps.Point(0,0),
              new google.maps.Point(9, 34));

          var marker = new google.maps.Marker({
              map: gtugs.map,
              title: chapter.name,
              position: coordinates,
              icon: gtugs.GTUG_MARKER,
              shadow: shadow
          });
          var infoWindow = new google.maps.InfoWindow({
              content: '<h4>' + chapter.name + '</h4>'
          })

          google.maps.event.addListener(marker, 'click',
              gtugs.openInfoWindow(infoWindow, marker));
        }
      }).send();

    new core.AjaxRequest('GET', '/guests', function(json) {
        var guests = JSON.parse(json).guests;
        for (var i = 0; i < guests.length; i++) {
          var guest = guests[i];

          var coordinates = new google.maps.LatLng(guest.latitude,
              guest.longitude);

          var marker = new google.maps.Marker({
              map: gtugs.map,
              position: coordinates
          });
        }
      }).send();

    gtugs.readCountryFromQueryString();
  };

  gtugs.readCountryFromQueryString = function() {
    var found = false;

    var matches = window.location.toString().match(/\?cc=([A-Z][A-Z])$/);
    if (matches && matches.length > 1) {
      var country = gtugs.getCountry(matches[1]);
      var countryOption = gtugs.getCountryOption(matches[1]);

      if (country && countryOption) {
        gtugs.map.setCenter(country.coordinates.latlng);
        gtugs.map.setZoom(country.coordinates.zoom);
        countryOption.selected = 'selected';

        var citySelect = core.getElementById('gtugs-citySelect');
        for (var i = 0; i < country.cities.length; i++) {
          var option = core.createElement('option', country.cities[i],
              {value: country.cities[i]})
          citySelect.insertBefore(option,
              citySelect.options[citySelect.options.length - 1]);
        }
        citySelect.selectedIndex = 0;

        found = true;
      }
    }

    if (!found) {
      gtugs.refreshPage(gtugs.countries[0].code)
    } else {
      gtugs.setCachedLocation();
    }
  };

  gtugs.getCountry = function(code) {
    for (var i = 0; i < gtugs.countries.length; i++) {
      if (gtugs.countries[i].code == code) {
        return gtugs.countries[i];
      }
    }

    return null;
  };

  gtugs.getCountryOption = function(code) {
    var countrySelect = document.getElementById('gtugs-countrySelect');
    var options = countrySelect.getElementsByTagName('option');

    for (var i = 0; i < options.length; i++) {
      if (options[i].value == code) {
        return options[i];
      }
    }

    return null;
  };

  gtugs.openInfoWindow = function(infoWindow, marker) {
    return function() {
      if (gtugs.activeInfoWindow != null) {
        gtugs.activeInfoWindow.close();
      }

      infoWindow.open(gtugs.map, marker);
      gtugs.activeInfoWindow = infoWindow;
    };
  };

  gtugs.refreshPage = function(code) {
    var urlParts = window.location.toString().split('?');
    window.location = urlParts[0] + '?cc=' + code;
  };

  gtugs.setCachedLocation = function() {
    var cachedLocation =
        core.getElementById('gtugs-cachedLocationField').value;
    var citySelect = core.getElementById('gtugs-citySelect');

    if (cachedLocation != '') {
      for (var i = 0; i < citySelect.options.length; i++) {
        if (citySelect.options[i].value == cachedLocation) {
          citySelect.options[i].selected = 'selected';
          return;
        }
      }

      gtugs.swapSelectWithInputField(citySelect, cachedLocation);
    }
  };

  gtugs.showLocationTextField = function(select) {
    if (select.value == '') {
      gtugs.swapSelectWithInputField(select, '');
    }
  };

  gtugs.swapSelectWithInputField = function(select, value) {
    var name = select.name
    var parent = select.parentNode;

    parent.removeChild(select);
    core.appendNode(core.createElement('input', null,
        {name: name, value: value}), parent);
  };
</script>

<div id="title">
  <h2><fmt:message key="signup-bodyTitle"/></h2>
</div>

<fmt:message key="signup-introduction"/>

<form:form method="post" commandName="guest">
  <form:hidden path="cachedLocation" id="gtugs-cachedLocationField"/>
  <table id="gtugs-signupFormTable" cellpadding="0" cellspacing="0">
    <tr>
      <th><fmt:message key="signup-countryHeader"/></th>
      <th><fmt:message key="signup-nameHeader"/></th>
      <th><fmt:message key="signup-emailHeader"/></th>
      <th><fmt:message key="signup-locationHeader"/></th>
      <th><fmt:message key="signup-interestHeader"/></th>
      <th></th>
    </tr>
    <tr>
      <td>
        <form:select path="country" id="gtugs-countrySelect" onchange="gtugs.refreshPage(this.value)">
          <form:option value="RU" label="Россия"/>
          <form:option value="UA" label="Украина"/>
          <form:option value="BY" label="Беларусь"/>
        </form:select>
      </td>
      <td>
        <form:input path="name"/>
      </td>
      <td>
        <form:input path="email"/>
      </td>
      <td style="width:175px">
        <form:select path="location" id="gtugs-citySelect" onchange="gtugs.showLocationTextField(this)">
          <form:option value=""><fmt:message key="signup-selectOption"/>...</form:option>
          <form:option value=""><fmt:message key="signup-otherOption"/>...</form:option>
        </form:select>
      </td>
      <td>
        <form:select path="interest">
          <form:option value="Joining"><fmt:message key="signup-joiningOption"/></form:option>
          <form:option value="Organizing"><fmt:message key="signup-organizingOption"/></form:option>
        </form:select>
      </td>
      <td style="padding-right:0px">
        <input type="submit" value="<fmt:message key="signup-submit"/>"/>
      </td>
    </tr>
    <tr>
      <td><span class="error"><form:errors path="country"/></span></td>
      <td><span class="error"><form:errors path="name"/></span></td>
      <td><span class="error"><form:errors path="email"/></span></td>
      <td><span class="error"><form:errors path="location"/></span></td>
      <td><span class="error"><form:errors path="interest"/></span></td>
      <td></td>
    </tr>
  </table>
</form:form>

<div id="map" style="border:solid #0566cc 1px; height:430px; width:100%"></div>

<%@ include file="includes/footer.jsp" %>